
div.checkbox {
  position: relative;
  cursor: pointer;

  > input[type='checkbox'] {
    display: none;
  }

  &[data-style="default"] {
    @include mask(null, $__textColor, 22px);
    width: 20px;
    height: 20px;

    &::before {
      transition: -webkit-mask 0.3s, background-color 0.3s;
    }

    &[data-type='checkbox']::before {
      @include maskImage('icon-checkbox-inactive');
    }

    &[data-type='radio']::before {
      @include maskImage('icon-radio-inactive');
    }

    &::after {
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      left: calc(50% - 1px);
      width: 2px;
      height: 2px;
      border-radius: 50%;
      pointer-events: none;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
      transition: background 0.2s, box-shadow 0.2s, opacity 0.5s;
      opacity: 0.2;
    }

    &.focus::after, &.clicked::after {
      background: rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5);
    }

    &.clicked::after {
      opacity: 0;
    }

    &.active {

      &::before {
        background-color: $__colorScheme;
      }

      &[data-type='checkbox']::before {
        @include maskImage('icon-checkbox');
      }

      &[data-type='radio']::before {
        @include maskImage('icon-radio');
      }

      &::after {
        box-shadow: 0 0 0 0 $__colorScheme;
      }

      &.focus::after, &.clicked::after {
        background: $__colorScheme;
        box-shadow: 0 0 0 20px $__colorScheme;
      }
    }
  }

  &[data-style="switch"] {
    width: 32px;
    height: 14px;
    transition: padding-left 0.2s, opacity 0.2s;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.2);
      transition: background 0.2s, opacity 0.2s;
    }

    &::after {
      content: "";
      position: relative;
      display: block;
      top: -3px;
      left: -3px;
      width: 20px;
      height: 20px;
      background-color: $textColorInverted;
      transition: background-color 0.2s;
      box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.4);
      border-radius: 50%;
    }

    &.active {
      padding-left: 18px;

      &::before {
        opacity: 0.4;
      }

      &::before, &::after {
        background-color: $__colorScheme;
      }
    }
  }
}

@import "../rtl/include/checkbox";
@import "../highContrast/include/checkbox";
@import "../dark/include/checkbox";